<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>并列选择器</title>
		<style>
			span.danger{
				color: red;
			}
			.btn.succ{
				color: green;
			}
			
	/* ---------------选中包含readonly 属性名的元素--------------------------- */
			[readonly] {
				border: 3px solid red;
			}
	/* ---------------选中包含name属性 并且属性值uname的元素--------------------------- */		
			[name="uname"] {
				background-color: green;
			}
	/* ---------------选中是input 并且有readonly属性的元素--------------------------- */				
			input[readonly]{
				background-color: yellow;
			}
			
		</style>

	</head>
	<body>
		<div class="danger">
			1
		</div>
		<span class="succ">2</span>
		<span class="danger">3</span>
		<span class="btn succ">4</span>
		<a href="#">百度一下你就知道</a>
		<hr>
		<!-- -----------------属性选择器---------------------- -->
		<input type="text">1
		<input type="text" readonly  value="就是不让你改">2
		<input type="text" name="uname">3
		<input type="password" name="upwd" >4
		
		
	</body>
</html>